<template>
  <page-frame>
    <div class="financialCenter">
      <div class="toptitle">
        <div class="left padding-bottom-6">财务中心</div>
      </div>
      <div class="borderT"></div>
      <div class="tabChange">
        <el-button @click="toggle(index,tab.id)" v-for="(tab,index) in CONSTANT_FINANCE_STATUS_OPTION" :class="{lightGreenBtn:active===index}"
        >
          {{tab.name}}
        </el-button>
      </div>
      <!--时间筛选暂时不添加-->
      <!--<div class="tabChange">-->
        <!--<span style="margin-right: 20px">时间:</span>-->
        <!--<el-button @click="toggle2(index,tab.id)" v-for="(tab,index) in CONSTANT_FINANCE_TIMES_OPTION" :class="{lightGreenBtn:active2===index}"-->
        <!--&gt;-->
          <!--{{tab.name}}-->
        <!--</el-button>-->
        <!--<div style="display: inline-block;margin-left: 10px;width: 300px">-->
          <!--<el-date-picker-->
            <!--v-model="dateRange"-->
            <!--type="daterange"-->
            <!--placeholder="选择日期范围"-->
          <!--&gt;-->
          <!--</el-date-picker>-->
        <!--</div>-->
      <!--</div>-->
      <div class="input">
        <el-form>
          <el-row>
            <el-col style="width:130px">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="fileId" @change="selectItem" @clear = "clearItem" clearable placeholder="选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div v-show="fileId=='1'">
                <el-input v-model="queryData.accountNo" @keyup.enter.native="query" placeholder="请输入会员账号">
                </el-input>
              </div>
              <div v-show="fileId=='2'">
                <el-input v-model="queryData.memberName" @keyup.enter.native="query"  placeholder="请输入会员姓名">
                </el-input>
              </div>
              <div v-show="fileId=='3'">
                <el-select v-model="queryData.billType" @change="query" clearable placeholder="请选择扣费事项">
                  <el-option
                    v-for="item in CONSTANT_FINANCE_DEDUCTIONS_OPTION"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>

      </div>
      <el-table
        :data="tableData"
        border
        @row-dblclick="handleRowClick"
        style="width: 100%">
        <el-table-column
          prop="accountNo"
          label="会员账号"
          width="">
        </el-table-column>
        <el-table-column
          prop="fullMemberName"
          label="会员姓名"
          width="">
        </el-table-column>
        <el-table-column
          prop="balance"
          label="账户余额(元)"
          width="">
        </el-table-column>
        <el-table-column
          prop="dateApplicationName"
          label="业务发起时间"
          width="">
        </el-table-column>
        <el-table-column
          prop="nextDeductionDate"
          label="下次扣费日期"
          width="">
        </el-table-column>
        <el-table-column
          prop="billTypeName"
          label="代收费项"
          width="">
        </el-table-column>
        <el-table-column
          prop="statusName"
          label="状态"
          width="">
        </el-table-column>
        <el-table-column
          label="操作"
          width="">
          <template scope="scope">
            <el-button
              type="text"
              size="small"
              v-if="scope.row.status=='3'"
              @click.stop="costOperation(scope.row)">
              收费
            </el-button>
            <el-button
              type="text"
              size="small"
              v-else-if="scope.row.status=='4'"
              @click.stop="costOperation(scope.row)">结算
            </el-button>
            <el-button
              type="text"
              size="small"
              v-else-if="scope.row.status=='5'"
              @click.stop="costOperation(scope.row)">变更确认
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.stop="refill(scope.row)">充值</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangePage"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import financeCenterApi from '../../service/finance/financeCenterApi';
  import {CONSTANT_FINANCE_DEDUCTIONS_OPTION} from '../../config/constant'
  import {CONSTANT_FINANCE_STATUS_OPTION} from '../../config/constant'
  import {CONSTANT_FINANCE_TIMES_OPTION} from '../../config/constant'
  export default {
    data () {
      return {
        dateRange: '',
        active: 0,
        active2: 0,
        fileId:1,
        queryData: {//筛选提交的数据
          accountNo: "",
          billType: null,
          memberName: "",
          status: null
        },
        fileList: [{
          fileId: 1,
          fileName: "会员账号"
        }, {
          fileId: 2,
          fileName: "会员姓名",
        }, {
          fileId: 3,
          fileName: "扣费事项",
        }],
        CONSTANT_FINANCE_TIMES_OPTION,
        CONSTANT_FINANCE_STATUS_OPTION,
        CONSTANT_FINANCE_DEDUCTIONS_OPTION,
        tableData: [],
        total: 0,
        currentPage: 1,
      }
    },
    methods: {
      init() {
        this.loadTableData(1);
      },
      /**
       * 选择项目
       */
      selectItem(){
        //清空选项数据
        this.queryData.accountNo="",
        this.queryData.billType=null,
        this.queryData.memberName="",
        this.queryData.status=null
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      /**
       * 搜索
       */
      query(){
        this.loadTableData(1);
      },
      /**
       * 加载页面数据
       */
      loadTableData(pageNum){
        let self = this;
        financeCenterApi.getAccountBills(10,pageNum,self.queryData).then(
          (response)=>{
            self.tableData = response.data.data.list;
            self.total = response.data.data.total;
            //代收费项类型转换
            for(let i=0;i<self.tableData.length;i++){
              if(self.tableData[i].billType==''){
                self.tableData[i].billTypeName = '';
              }else if(self.tableData[i].billType==0){
                self.tableData[i].billTypeName = '充值';
              }else if(self.tableData[i].billType==1){
                self.tableData[i].billTypeName = '固定扣费';
              }else if(self.tableData[i].billType==2){
                self.tableData[i].billTypeName = '入住收费';
              }else if(self.tableData[i].billType==3){
                self.tableData[i].billTypeName = '退住结算';
              }else if(self.tableData[i].billType==4){
                self.tableData[i].billTypeName = '换床费用';
              }else if(self.tableData[i].billType==5){
                self.tableData[i].billTypeName = '套餐变更费用';
              }
            }
            //状态类型转换
            for(let i=0;i<self.tableData.length;i++){
              if(self.tableData[i].status==0){
                self.tableData[i].statusName = '正常';
              }else if(self.tableData[i].status==1){
                self.tableData[i].statusName = '欠费';
              }else if(self.tableData[i].status==2){
                self.tableData[i].statusName = '余额不足';
              }else if(self.tableData[i].status==3){
                self.tableData[i].statusName = '待收费';
              }else if(self.tableData[i].status==4){
                self.tableData[i].statusName = '待结算';
              }else if(self.tableData[i].status==5){
                self.tableData[i].statusName = '待确认';
              }else if(self.tableData[i].status==6){
                self.tableData[i].statusName = '已关闭';
              }
            }
            //业务发起时间截取()
            for(let i=0;i<self.tableData.length;i++){
              self.tableData[i].dateApplicationName = self.tableData[i].dateApplication.substring(0,19);
            }
          }
        );
      },
      /**
       * tab切换
       */
      toggle(index, id){
        this.active = index;
        this.queryData.status = id;
        this.loadTableData(1);
      },
      /**
      *@fileName: financialCenter.vue
      *@描述：时间切换
      *@autor: xue-zhy
      *@time: 2017/6/8
      */
      toggle2(index, id){
        this.active2 = index;
        this.loadTableData();
      },
      /**
       * 双击行 表格
       */
      handleRowClick(row){
        this.$router.push({name: "accountDetails",params:{memberId:row.memberId,accountId:row.accountId}});
      },
      /**
       * 账户费用操作(收费，结算，变更确认) way:0-充值 3-收费 4-结算 5-变更确认
       */
      costOperation(val){
        this.$router.push({name: "financialMoney", params: {way: val.status, rowObj: val}});
      },
      /**
       * 账户费用操作(充值)
       */
      refill(row){
        this.$router.push({name: "financialMoney", params: {way: 0, rowObj: row}});
      },
      /**
       * 分页函数
       */
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        this.loadTableData(this.currentPage);
      },
    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .financialCenter .el-form-css {
    margin-bottom: 15px;
  }
</style>
